<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
  <h1>The Students Page</h1>
  <button onclick="doAdd()">添加学生</button>
  <br/>
  <table width="50%" class="table">
    <thead>
    <th>id</th>
    <th>name</th>
    <th>duty</th>
    <th>createdTime</th>
    <th>operation</th>
    </thead>
    <tbody>
    <tr th:each="s:${students}">
      <td th:text="${s.id}">1</td>
      <td th:text="${s.name}">MySQL</td>
      <td th:text="${s.duty}">DBMS</td>
      <td th:text="${#dates.format(s.createdTime, 'yyyy-MM-dd')}">2020-07-03</td>
      <td><button th:onclick="doFindById([[${s.id}]])">Update</button></td>
      <td><button th:onclick="doDeleteById([[${s.id}]])">Delete</button></td>
    </tr>
    </tbody>
  </table>
</div>
<script>
  function doAdd(){
    location.href="http://localhost:8080/students/doInsert"
  }

  function doFindById(id){
    location.href=`http://localhost:8080/students/doFindById?id=${id}`;
  }

  function doDeleteById(id){
    location.href=`http://localhost:8080/students/doDeleteById?id=${id}`;
  }
</script>

</body>
</html>